<template>
	<view class="swiperVidio">
		<video :src="videoSrc" object-fit="cover" :controls="false" :muted="isMuted" :loop="TabIndex == 0 ?true:false"
			:autoplay="TabIndex == 0 ?true:false" class="video" v-if="!TabIndex && videoShow" @ended="ended"></video>
		<button @click="toggleMute" hover-class="none" class="Mute" v-if="!TabIndex && videoShow">
			<u-icon :name="isMuted?'volume-off':'volume-up'" color="#ffffff" size="32"></u-icon>
		</button>
		<u-swiper  :list="image_list" interval="5000" height="550" mode="number" indicator-pos="bottomLeft" v-if="TabIndex ==1 || !videoShow" @click.stop="openImage"></u-swiper>
		<view class="tab" v-if="videoShow">
			<view v-for="(item,index) in btnList" :key="index" class="Item" :style="{opacity:TabIndex == index?'1':'0.5'}" @click="changTabIndex(index)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			videoSrc: {
				type: String,
				default: '',
				required: true
			},
			image_list:{
				type: Array,
				default: '',
				required: true
			},
			videoShow:{
				type: Boolean,
				default: false,
				required: true
			},
		},
		data() {
			return {
				TabIndex: 0,
				isMuted: true,
				btnList:[
					'视频',
					'图库'
				]
			}
		},
		methods:{
			toggleMute(){
				this.isMuted = !this.isMuted
			},
			changTabIndex(index){
				this.TabIndex = index
				this.$forceUpdate()
			},
			ended(e){
				console.log('e', e);
				this.TabIndex = 1
			},
			openImage(e){
				console.log('openImage', e);
				this.$PREVIEW_IMAGEARRAY(this.image_list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		margin: unset;
		padding: unset;
		background-color: transparent;
		/* 消除背景色 */
		border: none;
		/* 消除边框 */
	}

	button:after {
		border: unset;
	}

	.swiperVidio {
		width: 750rpx;
		height: 550rpx;
		position: relative;
		.video {
			width: 100%;
			height: 100%;
		}

		.Mute {
			position: absolute;
			left: 24rpx;
			bottom: 66rpx;
			width: 64rpx;
			height: 64rpx;
			background-color: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 87;
		}
		.tab{
			position: absolute;
			right: 24rpx;
			bottom: 66rpx;
			width: 134rpx;
			height: 44rpx;
			background-color: rgba(0, 0, 0, 0.6);
			border-radius: 8rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.Item{
				flex: 0.5;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>